<template>
  <div class="remindXF" v-show='remindShow' @click="showRemind()">
    <!-- <div class="closeRemind" ng-click="closeRemind()">
    </div> -->
    <div class="remind_cnt" @click.stop>
        <label>
            <span>请输入姓名：</span>
            <input type="text" placeholder="请输入姓名" v-model="xFansName">
        </label>
        <label>
            <span>请输入电话：</span>
            <input type="text" placeholder="请输入电话" v-model="phone">
        </label>
        <p class="lableRemind">* 申请成功后，登录账号密码将发送至该手机号</p>
        <div class="submit" @click="submitRemind()">提交</div>
    </div>
</div>
</template>
<script>
import { memberByXF } from "../libs/interface"
import { userInfoGet } from "../libs/publicMethod"
  export default {
    components:{ memberByXF },
    data () {
      return{
        remindShow: false, // 弹窗显示
        xFansName: '', // 姓名
        phone: '', // 电话
      }
    },
    methods: {
      showRemind (){        
        this.remindShow = !this.remindShow;
      },
      // 申请vip会员
      submitRemind(){
        let params = {
          memberId: userInfoGet().id,
          xFansName: this.xFansName,
          phone: this.phone
        }
        memberByXF( params, (data) => {
          this.remindShow = false
          if (data.code == 1) {
            this.$toast(data.msg)
          } else {
            this.$toast(data.msg)
          }
        })
      }
    }
  }
</script>
<style>
.remindXF{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(20, 19, 19, 0.5)
}
.closeRemind{
    width: 100%;
    height: 92%;
    background-color: rgba(20, 19, 19, 0.5)
}
.remind_cnt{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 40%;
    top: 30%;
    left: 10%;
    background-color: white;
    border-radius: .5rem;
}
.remind_cnt label{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.remind_cnt label span{
    width: 30%;
    font-size: .8rem;
}

.remind_cnt label input{
    width: 60%;
    height: auto;
    border: 1px solid #aaa;
    outline: none;
    padding: .3rem;
    border-radius: .3rem;
    font-size: .8rem;
    margin-bottom: 0;
}
.remind_cnt label:nth-child(2){
    margin-top: 10%;
}
.lableRemind{
    font-size: 60%;
    margin-top: 3%;
    color: red;
}
.submit{
    margin-top: 10%;
    padding: .5rem 1.5rem;
    border-radius: .5rem;
    background-color: #736EFF;
    color: white;
}
</style>
